const navArr = []

const fontSize = 16 // 文字大小
const arrorSize = 16 // 箭头大小
const ifShowLines = false // 是否显示上下两条横线

/**
 *
 * left 横线组的left值
 * top 横线组的top值
 * gtop：文本的top值
 * lineSpace: 两条横线间距
 **/
const pos = {
  left: 20,
  top: 20,
  gtop: 28,
  lineSpace: 30,
}
/*
 * font 文本字体 字号
 * textColor 文本颜色
 * lineColor 上下边线颜色
 **/
const style = {
  font: fontSize + 'px "Microsoft YaHei", sans-serif',
  textColor: '#011d2f',
  lineColor: 'rgba(6,54,127,0.8)',
}

// 折线的points属性，用来表示折线
const lineShape = [
  [0, 0],
  [6, 7],
  [0, 14],
]
// 箭头元素
const getArrows = function (ignore) {
  return {
    type: 'polyline',
    ignore: ignore,
    left: 2,
    top: 'middle',
    silent: true,
    shape: {
      points: lineShape,
    },
    style: {
      stroke: '#0090ff',
      lineWidth: 2,
    },
  }
}
// 文本元素
const getText = function (l, t, name, code) {
  return {
    type: 'text',
    left: l,
    top: t,
    info: {
      name: name,
      code: code,
    },
    style: {
      text: name,
      textAlign: 'center',
      fill: style.textColor,
      font: style.font,
    },
    onclick() {
      // console.log(this.info.code);
      // console.log(this.info.name);
    },
  }
}

// 两条横线group元素
const groupLine = {
  type: 'group',
  left: pos.left,
  top: pos.top,
  cursor: 'auto', // 光标
  silent: true,
  children: [
    {
      type: 'line',
      left: 0,
      top: 0,
      shape: {
        x1: 0,
        y1: 0,
        x2: 0, // 横线宽度
        y2: 0,
      },
      style: {
        stroke: style.lineColor,
      },
    },
    {
      type: 'line',
      left: 0,
      top: pos.lineSpace,
      shape: {
        x1: 0,
        y1: 0,
        x2: 0, // 横线宽度
        y2: 0,
      },
      style: {
        stroke: style.lineColor,
      },
    },
  ],
}

// 更新导航数据navArr
function navArrUpdate(name, code) {
  const index = navArr.findIndex((item) => {
    return item.code === code
  })
  if (index === -1) {
    navArr.push({
      name: name,
      code: code,
      width: navArr.length === 0 ? name.length * fontSize + 2 : name.length * fontSize + arrorSize + 2,
    })
  } else {
    // 如果有，则将后面的导航纪录删除
    navArr.splice(index + 1, navArr.length - index + 1)
  }
}

// 面包屑
export default function createBreadcrumb(name, code) {
  navArrUpdate(name, code) // 先更新一下navArr
  const breadcrumb = []
  let marginLeft = 0
  // 1.添加两条线
  breadcrumb.push(groupLine)

  // 2.添加文本组件 和 箭头组件
  navArr.forEach((item, index) => {
    // group元素
    const graphic = {
      type: 'group',
      left: pos.left + marginLeft,
      top: pos.gtop - 5,
      height: pos.lineSpace,
      bounding: 'raw',
      children: [],
    }
    if (index > 0) {
      // 添加箭头
      graphic.children.push(getArrows(false))
      // 添加文字
      graphic.children.push(getText(arrorSize, 'middle', item.name, item.code))
    } else {
      graphic.children.push(getArrows(true))
      graphic.children.push(getText(0, 'middle', item.name, item.code))
    }

    breadcrumb.push(graphic)
    marginLeft = marginLeft + item.width
  })

  // 3.修改两条横线长度
  if (ifShowLines) {
    breadcrumb[0].children[0].shape.x2 = marginLeft - 4 // 减2是将最后多出来的2像素减掉
    breadcrumb[0].children[1].shape.x2 = marginLeft - 4
  }

  return breadcrumb
}
